<script setup lang="ts">
import { watch, ref } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import Ball from "@visual/assets/icon/ball.svg?component";
import ReTextTooltip from "../../../components/ReTextTooltip";

defineOptions({
  name: "ListInDetect"
});
const isCollapsed = ref(false);
const props = withDefaults(
  defineProps<{
    propValue?: {
      contentList: Array<any>;
      title?: string;
      maxheight?: string;
      collapsed?: boolean;
      iconName?: string;
      size?: string;
    };
  }>(),
  {
    propValue: () => ({
      maxheight: "400px",
      contentList: [],
      title: "",
      collapsed: false,
      iconName: "alert",
      size: "normal"
    })
  }
);

const classes = (type: number) => {
  let types = [0, 1, 2, 3];
  return {
    "list-item-color-normal": type === 0,
    "list-item-color-warn": type === 1,
    "list-item-color-error": type === 2,
    "list-item-color-offline": type === 3,
    "list-item-color-defalut": !types.includes(type)
  };
};
const statusMap = ref({});
const valueArr = ref([]);
watch(
  props.propValue.contentList,
  newVal => {
    statusMap.value = {};
    valueArr.value = [];

    newVal?.forEach(item => {
      const { title } = item;
      if (title.indexOf("状态") === -1) {
        valueArr.value.push(item);
      } else {
        let newTitle = removeSubstring(title, "状态");
        statusMap.value[newTitle] = item;
      }
    });
  },
  {
    immediate: true,
    deep: true
  }
);
function removeSubstring(str, substring) {
  return str.replace(new RegExp(substring, "g"), "");
}

function formatValue(item) {
  if (!item.value) return "--";
  if (!item.unit) return item.value;
  return `${item.value}${item.unit}`;
}
</script>

<template>
  <leftCompWrapper v-model="isCollapsed" :title="propValue.title" :icon-name="propValue.iconName" :has-collapsed="propValue.collapsed">
    <div v-if="isCollapsed || !propValue.collapsed" class="list-wrapper">
      <div
        v-for="(item, index) in valueArr"
        :key="item.tagNum ? item.tagNum : index"
        class="border-dashed border-b-[1px] border-[#C6C6C6] list-item-content"
      >
        <div class="list-item-content-title w-1/2">
          <ReTextTooltip :content="item.title" :style="{ width: '140px' }" />
        </div>

        <div class="list-item-content-val w-1/3">{{ formatValue(item) }}</div>
        <div class="flex items-center content-center justify-end w-1/6">
          <Ball
            v-show="['异常', '正常', '报警'].indexOf(statusMap[item.title]?.value) !== -1"
            :class="{
              'text-[#10b981]': statusMap[item.title]?.value === '正常',
              'text-[#ef4444]': statusMap[item.title]?.value === '异常' || statusMap[item.title]?.value === '报警'
            }"
          />
          <span :class="classes(item.status)">{{ statusMap[item.title]?.value || "--" }}</span>
        </div>
      </div>
    </div>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
$listIcon: list-icon-;
$itemIcon: item-icon-;
$itemType: list-item-color-;

.#{$itemType}normal {
  color: #10b981;
}

.#{$itemType}warn {
  color: #f59e0b;
}

.#{$itemType}error {
  color: #ef4444;
}

.#{$itemType}offline {
  color: #909399;
}

.#{$itemType}default {
  color: #000;
}

.list-wrapper {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  width: 100%;

  .list-item-content {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    font-size: 11px;
    font-weight: 400;
    color: #000;
    height: 28px;
    line-height: 28px;
  }

  .item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    border-radius: 4px;
  }

  .#{$listIcon}water,
  .#{$listIcon}totalwater {
    width: 16px;
    height: 20px;
  }

  .#{$listIcon}purewater {
    width: 20px;
    height: 18px;
  }

  .#{$listIcon}wastewater {
    width: 16px;
    height: 20px;
  }

  .#{$listIcon}elector {
    width: 20px;
    height: 16px;
  }

  .#{$itemIcon}water {
    background-color: rgb(71 134 255 / 15%);
  }

  .#{$itemIcon}totalwater {
    background: rgb(255 178 102 / 15%);
  }

  .#{$itemIcon}purewater {
    background: rgb(73 176 245 / 15%);
  }

  .#{$itemIcon}wastewater {
    background: rgb(139 138 230 / 15%);
  }

  .#{$itemIcon}elector {
    background: rgb(139 138 230 / 15%);
  }
}
</style>
